<template>
    <div class="home">
        <div class="tables">
            <table border style="border-collapse:collapse;width:820px;line-height:60px;text-align:center;">
                <tr>
                    <td>ip地址</td>
                    <td>{{ externalIpAddress }}</td>
                </tr>
                <tr>
                    <td>日期</td>
                    <td>{{ dateTime }}</td>
                </tr>
                <tr>
                    <td>星期</td>
                    <td>星期{{ weekday}}</td>
                </tr>
                <tr>
                    <td>当前登录用户</td>
                    <td>{{ userName }}</td>
                </tr>
                <tr>
                    <td>ElementPlus</td>
                    <td>http://element-plus.org/zh-CN/</td>
                </tr>
                <tr>
                    <td>Vue</td>
                    <td>https://cn.vuejs.org/</td>
                </tr>
                <tr>
                    <td>node版本</td>
                    <td>v14.15.1</td>
                </tr>
                <tr>
                    <td>npm版本</td>
                    <td>6.14.8</td>
                </tr>
                <tr>
                    <td>开发者</td>
                    <td>Taurus</td>
                </tr>
            </table>
        </div>
        <div class="echartss" id="echartss"> </div>
    </div>
</template>
<script setup>
import axios from 'axios'
//  按需引入 echarts
import * as echarts from "echarts";
import { ref, onMounted } from 'vue'
const externalIpAddress = ref('')
const dateTime = ref('')
const weekday = ref('')
const userName = ref(sessionStorage.getItem("username"))
onMounted(() => {
    getExternalIp();
    var date = new Date();
    var year = date.getFullYear(); // 返回四位数字形式的年份（如2021）
    var month = date.getMonth() + 1; // 返回两位数字形式的月份（如9表示九月）
    var day = date.getDate(); // 返回两位数字形式的日期（如31表示31号）
    weekday.value = numberToChineseWeekday(date.getDay());
    dateTime.value = year + "年" + month + "月" + day + "日";
    chatLeidaInit();

});
const numberToChineseWeekday=(day)=> {  
  const chineseWeekdays = ['日', '一', '二', '三', '四', '五', '六'];  
  return chineseWeekdays[day];  
}  
const getExternalIp = () => {
    axios.get('https://api.ipify.org?format=json')
        .then(response => {
            externalIpAddress.value = response.data.ip;
        })
        .catch(error => {
            console.log(error);
        });
}
const chatLeidaInit = () => {
    var myChart = echarts.init(document.getElementById('echartss'))
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    })
}
</script>
<style lang="scss" scoped>
.home {
    display: flex;
    align-items: center;
    padding:10px;

    .echartss {
        width:800px;
        height:620px;
    }
}
</style>